<template>
	<view style="min-height: 100vh;background-color: #fff;">
		<dev-navbar title="上传体检报告"></dev-navbar>
		<dev-list-layout height="102" leftText="报告名称" :isRightImg="false" leftColor="#333333" rightTextColor="#9B9B9B"
			rightTextWidth="200" padding="0rpx 24rpx">
			<template v-slot:right>
				<input v-model="form.phyInstitution" type="text" style="text-align: right;" placeholder="请填写报告名称">
			</template>
		</dev-list-layout>
		<dev-list-layout @tap="timeShow = true" height="102" leftText="体检时间" leftColor="#333333"
			rightTextColor="#9B9B9B" :rightText="form.phyTime || '请选择'" imageHeightRight="30" imageWidthRight="30"
			rightTextWidth="200" padding="0rpx 24rpx">
		</dev-list-layout>
		<view style="height: 30rpx;width: 100%;background-color: #F5F5F5;"></view>

		<!-- 上传报告 -->
		<view class="upload-module">
			<view class="title">
				上传报告
			</view>
			<view class="upload-type">
				<text style="margin-right: 20rpx;">文件格式</text>
				<radio @tap="type=1" :value="1" style="transform: scale(0.8,0.8);" color="#2EA7E0" :checked="type==1" />
				图片
				<radio @tap="type=2" :value="2" style="transform: scale(0.8,0.8);" color="#2EA7E0" :checked="type==2" />
				pdf
			</view>
			<view class="up_pict_box" v-show="type==1">
				<view class="everbox" v-for="(item,index) in imgbox" :key="index">
					<view class="everpic">
						<dev-svg-image radius="10" width="200" height="200" mode="image" :imageUrl="item">
						</dev-svg-image>
					</view>
					<!-- 右上角的红叉 -->
					<view class="redx" @tap="delateimg(index)">
						<dev-svg-image width="33" height="33" mode="image"
							imageUrl="shoppingMall/AB8ECF8B439D4BE0BA1A2DB529CD4DFC.png"></dev-svg-image>
					</view>
				</view>
				<!-- v-show="imgbox.length<6" -->
				<view v-show="imgbox.length<numberOfPictures" class="everbox" @tap="upimg">
					<view class="everpic-u">
						<dev-svg-image width="33" height="33" mode="image"
							imageUrl="shoppingMall/8E08961AA4DA4E208254392A33552BA8.png"></dev-svg-image>
					</view>
				</view>
				<view style="width: 200rpx;"></view>
			</view>

			<view v-show="type == 2">
				<view class="pdf-list">
					<view class="file-name ellipsis">
						{{pdfUrl?pdfUrl:'未上传'}}
					</view>
					<dev-button @tapDev="upPdf()" elementType="inline">{{pdfUrl?'重新上传':'上传文件'}}</dev-button>
				</view>

			</view>

			<view class="scarlet-letter">
				*上传即表示您同意健康管理师查看您的体检报告
			</view>
			<view class="grey-character">
				pdf 1张大小不超过10M，图片最多20张，单张不超过5M
			</view>

		</view>


		<u-popup border-radius="30" v-model="timeShow" mode="bottom">
			<view>
				<view class="selector-box">
					<view class="cancel" @tap="timeShow = false">
						取消
					</view>
					<view class="determine" @tap="clickOk">
						确定
					</view>
				</view>
				<dev-picker-time height="500" v-model="chooseTime"></dev-picker-time>
			</view>
		</u-popup>
		<view class="" style="height: 160rpx;"></view>
		<dev-iphone-bottom>
			<view style="padding: 30rpx 48rpx;">
				<dev-button @tapDev="saveReport" fontSize="34" width="654" height="90" radius="45">保存</dev-button>
			</view>
		</dev-iphone-bottom>

		<dev-check-data :form="form" :rules="rules" ref="check"></dev-check-data>


	</view>
</template>

<script>
	
import uPopup from "@/uview-ui/components/u-popup/u-popup.vue"

	import devListLayout from '@/pagesMy/components/dev-list-layout/dev-list-layout.vue'
	export default {
		components: {
			devListLayout,
			uPopup,
		},
		data() {
			return {
				type: 1, //1 图片 2pdf
				timeShow: false,
				chooseTime: '', //选择时间
				numberOfPictures: 20, //最大上传图片数
				form: {
					phyInstitution: '', //报告名称
					phyTime: '', //绑定时间
				},
				imgbox: [], //图片地址
				pdfUrl: '', //pdf 文件地址

				rules: {
					phyInstitution: [{
						required: true,
						message: '请输入报告名称',
					}],
					phyTime: [{
						required: true,
						message: '请选体检定时间',
					}],
				},

			};
		},
		onLoad() {
			console.log(global.userInfo.nickName)
		},
		methods: {
			//保存报告
			saveReport() {
				let isItCorrect = this.$refs.check.check();
				if (isItCorrect) {
					if (this.type == 1) {
						if (this.imgbox.length == 0) {
							this.$message.info('请选择图片')
							return
						}
					} else {
						if (!this.pdfUrl) {
							this.$message.info('请上传文件')
							return
						}
					}
					this.addReport(); //提交报告

				}
			},

			//上传报告
			addReport() {
				this.$https.post(global.apiUrls.addReport, {
					fileType: this.type, //上传类型
					phyInstitution: this.form.phyInstitution, //报告名称
					phyTime: this.form.phyTime,
					reportUrl: this.type == 1 ? this.imgbox.toString() : this.pdfUrl,
					userName: global.userInfo.nickName,
					phone: global.userInfo.phone,

				}).then(res => {
					if (res.data.code == 1000) {
						this.$message.info('提交成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 500)

					}

				})
			},
			//弹框点击确定
			clickOk() {
				this.form.phyTime = this.chooseTime;
				this.timeShow = false;
			},
			//删除图片
			delateimg(index) {
				this.imgbox.splice(index, 1);
			},
			//上传图片
			upimg() {
				let _this = this;
				uni.chooseImage({
					count: this.numberOfPictures - this.imgbox.length,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						let theLastOneIndex = tempFilePaths.length-1;
						uni.showLoading({
							title: '上传中'
						});
						console.log(tempFilePaths,'是个啥东西')
						tempFilePaths.forEach((item,index)=>{
							uni.uploadFile({
								url: global.UPLOAD_IMAGE_URL, //仅为示例，非真实的接口地址
								filePath: item,
								scene: 'report',
								name: 'upfile',
								success: (resOk) => {
									console.log(index,theLastOneIndex,'index 对比')
									if(index == theLastOneIndex){
										uni.hideLoading();
									}
									let res = JSON.parse(resOk.data);
									console.log(res,'图片上传结果')
									console.log(res.result.url,'图片上传结果地址')
									if (res.code == 1000) {
										_this.imgbox.push(res.result.url)
									}
								},
								fail: (err) => {
									console.log(index,theLastOneIndex,'index 对比')
									if(index == theLastOneIndex){
										uni.hideLoading();
									}
									console.log(err,'上传图片错误信息')
								},
							});
						})
					}
				});
			},
			//上传pdf
			upPdf() {
				let _this = this;
				wx.chooseMessageFile({
					type: 'file',
					count: 1,
					extension: ['pdf', 'PDF'],
					success: function(choosepdf) {
						const tempFilePaths = choosepdf.tempFiles;
						uni.showLoading({
							title: '上传中'
						});
						uni.uploadFile({
							url: global.UPLOAD_IMAGE_URL, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0].path,
							scene: 'reportPdf',
							name: 'upfile',
							success: (resOk) => {
								uni.hideLoading();
								let res = JSON.parse(resOk.data);
								console.log(res,'pdf上传结果')
								console.log(res.result.url,'pdf上传结果地址')
								if (res.code == 1000) {
									_this.pdfUrl = res.result.url;
								}
							},
							fail: (err) => {
								uni.hideLoading();
								console.log(2)
								console.log(err)
							},
						});
					}
				});
			}


		}
	}
</script>

<style lang="scss">
	.selector-box {
		padding: 30rpx 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.cancel {
			font-size: 30rpx;
			font-weight: 400;
			color: #999999;
		}

		.determine {
			font-size: 30rpx;
			font-weight: 400;
			color: #2EA7E0;
		}
	}

	.upload-module {
		padding: 32rpx 30rpx;
		background-color: #fff;

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}

		.upload-type {
			margin-top: 30rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}
	}

	.up_pict_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.everbox {
			position: relative;
			margin-top: 32upx;
			margin-right: 24upx;

			.everpic {
				width: 200upx;
				height: 200upx;
				border-radius: 24upx;
				overflow: hidden;
				background-color: antiquewhite;
			}

			.redx {
				width: 36upx;
				height: 36upx;
				position: absolute;
				top: 10upx;
				left: 10rpx;
			}
		}

		.everpic-u {
			background: #F5F5F5;
			border-radius: 10rpx;
			border: 1rpx solid #979797;
			width: 200upx;
			height: 200upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.pdf-list {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #D1F2F0;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;

		.file-name {
			width: 400rpx;
			font-size: 26rpx;
			color: #485465;
		}
	}


	.scarlet-letter {
		margin-top: 44rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FF333A;
	}

	.grey-character {
		margin-top: 10rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
	}
</style>
